<template>
	<view class="fxq-pages flex-x-center fill-base">
		<view class="common-popup-content popup-phone pd-lg flex-center flex-column radius-16">
			<!-- <view class="f-caption c-caption">您暂未绑定手机号，快来绑定吧</view> -->
			<view class="space-lg pb-lg"></view>
			<view class="space-lg pb-lg"></view>
			<view class="flex-center mb-lg">
				<view class="input-info radius-16">
					<input v-model="subForm.name" type="text"
						class="item-input flex-y-center pl-lg pr-lg f-sm-title c-title"
						placeholder-class="c-placeholder" :placeholder="subRule[0].errorMsg" />
				</view>
			</view>
			<view class="input-info radius-16">
				<input v-model="subForm.id_code" type="text"
					class="item-input flex-y-center pl-lg pr-lg f-sm-title c-title" maxlength="18"
					placeholder-class="c-placeholder" :placeholder="subRule[1].errorMsg" />
			</view>
			<view class="button">
				<view @tap.stop="$util.goUrl({url: 1, openType: 'navigateBack'})" class="item-child">
					取消
				</view>
				<view @tap.stop="submitRealName" class="item-child" :style="{background: primaryColor,color:'#fff'}">
					确定
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	// #ifdef APP-PLUS
	const ocr = uni.requireNativePlugin('DC-WBH5FaceVerifyService');
	// #endif
	export default {
		data() {
			return {
				subForm: {
					name: '',
					id_code: ''
				},
				subRule: [{
					name: "name",
					checkType: "isNotNull",
					errorMsg: "请输入姓名",
					regText: "姓名"
				}, {
					name: "id_code",
					checkType: "isIdCard",
					errorMsg: "请输入身份证号"
				}],
			}
		},
		computed: mapState({
			coachInfo: state => state.user.coachInfo,
			configInfo: state => state.config.configInfo,
		}),
		onLoad(options) {
			console.log(options, '========> options')
			this.initIndex()
		},
		// #ifdef APP-PLUS
		async onShow() {
			await this.getCoachInfo()
			let {
				is_fxq_check
			} = this.coachInfo
			if(!is_fxq_check){
				this.$util.goUrl({url: 1, openType: 'navigateBack'})
			}
		},
		// #endif
		methods: {
			...mapActions(['getConfigInfo', 'getCoachInfo', ]),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				await this.getCoachInfo()
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.subRule.map(item => {
					let {
						name,
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				return message;
			},
			async submitRealName() {
				let param = this.$util.deepCopy(this.subForm)
				let msg = this.validate(param);
				if (msg) {
					this.$util.showToast({
						title: msg
					})
					return
				}
				this.$util.showLoading()
				let data = await this.$api.technician.fxqCheck(param)
				console.log(data, '======> fxqCheck')
				this.$util.hideAll()
				if (data.check_type == 1) {
					// this.toFxqSign()
					this.$util.goUrl({
						url: `/technician/pages/fxq/index`
					})
				} else {
					// #ifdef H5
					window.location.href = data.url
					// #endif
					// #ifdef APP-PLUS
					let url = data.url //拉起h5刷脸的url
					let thirdurl = 'https://www.peikangbao.cn/fxq.html'; //h5刷脸完成后要跳转的接入方的url，这个接入方填写自己的url可
					ocr.startH5FaceVerify({
						h5faceurl: url,
						h5thirdurl: thirdurl
					}, result => { 
						console.log(result, "H5刷脸后跳转到thirdurl所在h5页面的回调");
						ocr.destroyH5Activity(null); //调用关闭插件的webView.
						//uniapp todo 接入方自己的逻辑

					}, result => {
						//这里是终端接受h5页面的消息回调。uniapp与h5页面两者通信可通过这个回调作为中间桥接实现。
						//注意：约定h5页面和webView通信通过JavaScriptInterface接口和JavaScript进行交互。在H5页面中使用window.tencentApi.postMessage的方式来调用这个方法，参数为String类型。如果是jsonobject需要转String
						console.log(result, "自定义回调");
						//uniapp todo 接入方自己的逻辑
					});
					console.log("click=======意愿性刷脸====>startH5FaceVerify");
					// #endif
					// #ifdef MP-WEIXIN
					wx.navigateToMiniProgram({
						appId: 'wxa0a9f6f0154bbe7d', // 腾讯云 E 证通小程序的 AppId
						path: 'pages/authPage/auth', // 目标页面
						extraData: {
							token: data.eid_token, // 接入方服务端获取的 EidToken
						},
						envVersion: 'release', // 跳转到正式版本
						/* 跳转成功的回调函数 */
						success(res) {
							console.log('跳转成功', res); // 接入方小程序自己的业务逻辑
						},
						/* 跳转失败的回调函数 */
						fail(err) {
							console.log('跳转失败', err); // 接入方小程序自己的业务逻辑
						}
					})
					// #endif
				}
			},
			// 放心签
			async toFxqSign() {
				await this.getCoachInfo()
				let {
					id_code,
					true_user_name: name = '',
					fxq_status // 0 未发起合同  1商家签署 2工作者签署 3完成
				} = this.coachInfo

				if (!fxq_status) {
					this.$util.showToast({
						title: `请联系平台发起合同签署`
					})
					return
				}
				if (fxq_status == 1) {
					this.$util.showToast({
						title: `请联系平台签署合同`
					})
					return
				}
				if (fxq_status == 2 || fxq_status == 3) {
					this.$util.goUrl({
						url: `/technician/pages/fxq/index`
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.fxq-pages {
		.popup-phone {
			width: 630rpx;
			height: 500rpx;

			.input-info {
				width: 570rpx;
				height: 90rpx;
				background: #F7F7F7;

				.item-input {
					height: 90rpx;
					font-size: 32rpx;
					text-align: left;
				}
			}

			.input-info.sm {
				width: 400rpx;
			}

			.send-btn {
				width: 150rpx;
				height: 90rpx;
			}
		}
	}
</style>